<template>
	<view class="online-page">
		<c-layout>
			<c-navigation-bar slot="head" :title='$t("home.OfflineFinance")'></c-navigation-bar>

			<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom1">
				<view class="list-box" v-for="(item,index) in lists" :key="item.id">
					<view class="name-box">
						<u-icon name="coupon-fill" color="#000000" size="20"></u-icon>

						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="">
						<view class="tittle1"> {{$t('moneyManagement.numVid')}}：</view>
						<view class="tittle2">{{item.videoCount}}</view>
					</view>
					<view class="">
						<view class="tittle1">{{$t('moneyManagement.level')}}：</view>
						<view class="tittle2">{{item.userLevel}}</view>
					</view>
					<view class="tittle1">
						{{$t('moneyManagement.balance')}}:
					</view>
					<view class="money-box">
						<view class="money">
							$
						</view>
						<view class="money">
							{{Number(item.amountMin).toFixed(2)}}
						</view>
						<view class="middle">
							~
						</view>
						<view class="money">
							$
						</view>
						<view class="money">
							{{Number(item.amountMax).toFixed(2)}}
						</view>
					</view>
					<view class="">
						<view class="tittle1">{{$t('moneyManagement.progress')}}</view>
						<view class="incomplete">{{item.isComplete?$t('moneyManagement.Complete'):$t('moneyManagement.Incomplete')}}</view>
					</view>
					<view class="">
						<view class="tittle1">{{$t('moneyManagement.award')}}：</view>
						<view class="tittle1">
							${{publicJS.toFixed(item.income)}}
						</view>
					</view>
					<view class=" btn-box">
						<view :class="it.finish?'finish':'' " v-for="(it,ind) in item.detailVOS" :key="ind"
							@click="watching(it.offlineId,ind,index,item)" :disabled="it.type">{{$t('media.Video')}}
							({{it.time}}s)</view>
					</view>
				</view>
			</scroll-view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				lists: []
			};
		},

		onShow() {
			this.lists = []
			this.current = 1
			this.getLists()
		},
		methods: {

			//判断用户权限
			watching(id, ind, index, item) {
				const currentTask = this.lists[index].detailVOS[ind]
				if (currentTask.finish) {
					return
				}

				this.$u.get('/app/user/info').then((res) => {
					let userLevel = res.data.level
					let balance = res.data.balance
					console.log('====', userLevel, balance);
					//判断等级
					if (userLevel < Number(item.userLevelId)) {
						this.$u.toast(this.$t('moneyManagement.levelsLower'));
						return
					}
					//判断余额
					if (balance < item.amountMin) {
						this.$u.toast(this.$t('moneyManagement.notFonds'));
						return
					} else if (balance > item.amountMax) {
						this.$u.toast(this.$t('moneyManagement.upFonds'));
					}

					if (!currentTask.type) {
						// console.log(this.lists[index], 'this.lists[index]this.lists[index]this.lists[index]');
						// this.$u.get(`/app/financial/offline/check/${id}`).then((res) => {
						this.$u.route(`/pages/public/recordVideo/recordVideo`, {
							videoId: currentTask.videoId,
							offlineId: currentTask.offlineId,
							time: currentTask.time,
							sort: currentTask.sort,
							heartCount: this.lists[index].likeCount, //喜欢
							collectCount: this.lists[index].flowerCount, // 花
							zanCount: this.lists[index].likesCount, //赞
							// count:currentTask.likeCount || 5,
						})
						// this.cheakComplete()  
						// })
					}
				})



			},
			cheakComplete() {  
				this.lists.forEach(item => {
					let isComplete = item.detailVOS.every((it) => {
						return it.finish
					})
					this.$set(item, "isComplete", isComplete)
				})

			},
			getLists(current) {
				if (current || current == 0) {
					this.current = curren
				}
				console.log(this.current, 'this.currentthis.current');
				let data = {
					pageSize: 200,
					pageNum: this.current
				}
				this.$u.post('/app/financial/offline/page', data).then((res) => {

					const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.lists = this.lists.concat(nextDataList);
						this.lists.forEach(item => {
							item.detailVOS.forEach(it => {
								this.$set(it, 'type', false)
							})

						})
						this.cheakComplete()
						console.log(111, this.lists);
						this.current++;
					} else {
						uni.showToast({
							title: 'no more',
							icon: 'none'
						});
					}
				})
			},
			//触底加载
			onreachBottom1() {
				console.log('reresh');
				this.getLists()
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.c-navigation-bar .navbar .center[data-v-11ec4984] uni-text span {
		font-size: 28rpx;

		font-weight: 600;
	}

	/deep/.uni-scroll-view,
	.uni-scroll-view-content {
		height: 98%;
		overflow: auto;
	}

	.uni-scroll-view {
		margin-bottom: 100rpx;
	}

	.list-box {
		background: #FFFFFF;
		border-radius: 26rpx;
		border: 1px solid #E3E3E3;
		margin: 30rpx 40rpx;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		view {
			display: flex;

			.tittle1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;

			}

			.tittle2 {
				font-size: 24rpx;
				font-weight: 500;
				color: #2B38CD;
			}

			.incomplete {
				width: 136rpx;
				height: 34rpx;
				background: #333755;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 34rpx;
				text-align: center;
				justify-content: center;
				margin-left: 8rpx;
			}

		}

		.name-box {
			display: flex;
			justify-content: center;

			view {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

		}
	}

	.money-box {
		margin-bottom: 10rpx;
		align-items: flex-end;
		justify-content: center;

		.middle {
			margin: 0 8rpx;
			font-size: 32rpx;
			color: #929293;
		}

		.dollar {
			font-size: 19rpx;
			color: #f75f6a;
			font-weight: 500;
			margin-right: 5rpx;
			margin-bottom: 4rpx;
		}

		.money {
			font-size: 36rpx;
			font-weight: 500;
			color: #f75f6a;

		}
	}

	.btn-box {
		margin: 10rpx 0;
		flex-wrap: wrap;
		justify-content: center;

		view {
			margin-right: 10rpx;
			width: 168rpx;
			height: 50rpx;
			background: #2934d0;
			border-radius: 14rpx;
			margin: 20rpx 20rpx 0 0;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 52rpx;
			text-align: center;
			justify-content: center;
		}

		.finish {
			background: #d3d3d3;
		}
	}
</style>